<template>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html"><img src="static/img/index-login.png" alt="" width="80" /></a>
      </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
                <li class="dropdown">
                  <a class="dropdown-toggle" data-toggle="dropdown" href="#"><img src="static/img/ctn-one.png" alt="" width="20" />    <span id="menu_systemSetting">系统设置</span></a>
                   <ul class="dropdown-menu">
                      <li><a href="#/systemSetting/cmsServer">CMS服务器</a></li>
                      <li><a href="#/systemSetting/hdrServer">转发服务器</a></li>
                      <li><a href="#/systemSetting/rmsServer">录像服务器</a></li>
                      <li><a href="#/systemSetting/dbServer">数据库</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                  <a class="dropdown-toggle" data-toggle="dropdown" href="#"><img src="static/img/ctn-two.png" alt="" width="20" />    <span id="menu_resManage">资源管理</span></a>
                   <ul class="dropdown-menu">
                            <li><a href="#/resourceManage/deviceManage">设备管理</a></li>
                            <li><a href="#/resourceManage/groupManage">设备组管理</a></li>
                            <li><a href="#/resourceManage/platManage">平台管理</a></li>
                        </ul>
                </li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><img src="static/img/ctn-three.png" alt="" width="20" />    <span id="menu_userManage">用户管理</span></a>
                   <ul class="dropdown-menu">
                            <li><a href="#/userManage/permissionManage">权限管理</a></li>
                            <li><a href="#/userManage/roleManage">角色管理</a></li>
                            <li><a href="#/userManage/userManage">用户管理</a></li>
                        </ul>
                </li>
                <li class="dropdown">
                  <a href="#/planTask"><img src="static/img/ctn-four.png" alt="" width="20" />    <span id="menu_planTask">计划任务</span></a>
                </li>
                <li class="dropdown">
                  <a href="#/systemLog/systemLog"><img src="static/img/ctn-five.png" alt="" width="20" />    <span id="menu_sysLog">系统日志查询</span></a>
                </li>
            </ul>
          <ul class="nav navbar-nav navbar-right">
              <li :class="[dropdown, {open: isHover1}]" @mouseenter="isHover1 = true" @mouseleave="isHover1 = false">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-hdd xtrzcx-span"></span></a>
                 <ul class="dropdown-menu">
                          <li><a href="#">设备总数：<span>{{sysInfo.TotalCount}}</span></a></li>
                          <li><a href="#">已连接：<span>{{sysInfo.ConnCount}}</span></a></li>
                          <li><a href="#">未连接：<span>{{sysInfo.DisonnCount}}</span></a></li>
                      </ul>
              </li>
              <li :class="[dropdown, {open: isHover2}]" @mouseenter="isHover2 = true" @mouseleave="isHover2 = false">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-cd xtrzcx-span"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">CMS服务器CPU：<span>{{sysInfo.CMScpupercent}}％</span>&nbsp;&nbsp;内存：<span>{{sysInfo.CMSmemoryusage}}MB</span></a></li>
                  <li><a href="#">转发服务器CPU：<span>{{sysInfo.HDRcpupercent}}％</span>&nbsp;&nbsp;内存：<span>{{sysInfo.HDRmemoryusage}}MB</span></a></li>
                  <li><a href="#">录像服务器CPU：<span>{{sysInfo.RMScpupercent}}％</span>&nbsp;&nbsp;内存：<span>{{sysInfo.RMSmemoryusage}}MB</span>&nbsp;&nbsp;硬盘：<span>{{sysInfo.RMSdiskpercent}}％ （{{sysInfo.RMSdiskusage + '/' + sysInfo.RMSdisktotal}} GB）</span></a></li>
                </ul>
              </li>
              <li class="dropdown head-set">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-user xtrzcx-span"></span></a>
                <ul class="dropdown-menu">
                    <li><a class="a-hover">ID：<span>{{user.username}}</span></a></li>
                    <li><a class="a-hover">手机：<span>{{user.telephone}}</span></a></li>
                    <li><a href="#/personalCenter">个人中心</a></li>
                    <li><a @click="logout()">退出</a></li>
                 </ul>
              </li>
          </ul>
        </div>
      </div>
  </nav>
</template>

<script type="text/javascript">
  import base from '@/service/Base.vue'
  import router from '@/router/index.js'
  export default{
    name: 'app-nav',
    data () {
      return {
        sysInfo: {},
        isHover1: false,
        isHover2: false,
        dropdown: 'dropdown',
        user: base.user
      }
    },
    created: function () {
      console.log('user', this.user)
      var $this = this
      // setInterval(function () {
      var data = {method: 'SysInfo'}
      $this.$http.post('/api/hedacmdreq', data).then(response => {
        $this.sysInfo = response.data.HedaACK.Body
      })
      // },
      // 3000)
    },
    methods: {
      logout: function () {
        window.duang.clearData()
        delete base.user
        router.push({name: 'Login'})
      }
    }
  }
</script>
<style>
    .msgc{color:green;}
</style>
